<template>
	<div>
		<!-- 炉次计划 -->
		<pol-title title="炉次计划"></pol-title>

		<div class="padding-lr border-solid bg-tm radius-sm main-box-height">
			<!-- 搜索框 -->
			<pol-search :form="searchForm" :schema="schema" @search="clickSearch" class="margin-top">
				<template #CardTypeName2>
					<div class="flex align-center">
						<span class="margin-right-lg margin-left-xl">状态</span>
						<div class="padding-lr-xl solid radius-sm rest-el-checkbox" style="margin-right: 100px;">
							<el-radio-group v-model="radio1">
								<el-radio value="1" size="large" class="margin-right-xxl">
									<template #default>
										<span class="text-white">全部</span>
									</template>
								</el-radio>
								<el-radio value="2" size="large" class="margin-right-xxl">
									<template #default>
										<span class="text-green">未执行/执行中</span>
									</template>
								</el-radio>
								<el-radio value="3" size="large">
									<template #default>
										<span class="text-orange">已执行</span>
									</template>
								</el-radio>
							</el-radio-group>
						</div>
					</div>
				</template>
				<template #btnSlot>
					<el-button icon="Plus" type="primary" class="btn-bg-blue" size="large" @click="dialogOpen">新增</el-button>
				</template>
			</pol-search>

			<!-- 表格 -->
			<pol-table ref="polTableRef" v-bind="tableOpt" height="calc(100vh - 620px)">
				<template #caozhuo1="{ row, rowIndex }">
					<div class="flex align-center justify-center">
						<span @click="moveUp(row, rowIndex)" :class="rowIndex == 0 ? 'text-gray' : 'cursor'">上移</span>
						<span @click="moveDown(row, rowIndex)" class="margin-lr-lg cursor">下移</span>
						<el-dropdown trigger="click">
							<span class="el-dropdown-link flex align-center text-green2 cursor">
								更多
								<el-icon class="el-icon--right">
									<arrow-down />
								</el-icon>
							</span>
							<template #dropdown>
								<el-dropdown-menu>
									<el-dropdown-item>标示为未执行</el-dropdown-item>
									<el-dropdown-item>标识为已执行</el-dropdown-item>
									<el-dropdown-item @click="edit(row)">编辑</el-dropdown-item>
									<el-dropdown-item>删除</el-dropdown-item>
								</el-dropdown-menu>
							</template>
						</el-dropdown>
					</div>
				</template>
			</pol-table>

			<!-- 炉次计划信息 -->
			<furnaceNumber ref="furnaceNumberRef" tableClass="cellClassName"></furnaceNumber>
		</div>
		
		<el-dialog v-model="dialogBZPopup" title="编辑" width="800" center align-center class="search-light">
			<div class="padding">
				<div class="margin-top flex align-center">
					<div class="flex-sub flex align-center">
						<span class="margin-right-sm heat-label">制作命令号</span>
						<el-input v-model="editItem.IsDefault" placeholder="" size="large" disabled />
					</div>
		
					<div class="flex-sub flex align-center">
						<span class="margin-right-sm heat-label">计划号</span>
						<el-input v-model="editItem.P_IsSys" size="large"></el-input>
					</div>
				</div>
				
				<div class="margin-top flex align-center">
					<div class="flex-sub flex align-center">
						<span class="margin-right-sm heat-label">熔炼号</span>
						<el-input v-model="editItem.P_IsReadOnly" placeholder="" size="large" />
					</div>
						
					<div class="flex-sub flex align-center">
						<span class="margin-right-sm heat-label">浇次1D号</span>
						<el-input v-model="editItem.gangbao" size="large"></el-input>
					</div>
				</div>
				
				<div class="margin-top flex align-center">
					<div class="flex-sub flex align-center">
						<span class="margin-right-sm heat-label">浇次内序号</span>
						<el-input v-model="editItem.kaishi" placeholder="" size="large" />
					</div>
						
					<div class="flex-sub flex align-center">
						<span class="margin-right-sm heat-label">钢种</span>
						<el-input suffix-icon="Edit" v-model="editItem.gangzhong" size="large"></el-input>
					</div>
				</div>
				
				<div class="margin-top flex align-center">
					<div class="flex-sub flex align-center">
						<span class="margin-right-sm heat-label">长度</span>
						<el-input v-model="editItem.cd" placeholder="" size="large" />
					</div>
						
					<div class="flex-sub flex align-center">
						<span class="margin-right-sm heat-label">记录人</span>
						<el-input v-model="editItem.jlr" size="large"></el-input>
					</div>
				</div>
				
				<div class="flex justify-end padding-bottom padding-right margin-top">
					<el-button type="primary" class="btn-bg-blue padding-lr-xl margin-top-lg" size="large">保存</el-button>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script setup>
	import furnaceNumber from './components/furnaceNumber.vue'
	import { ref } from 'vue';

	const furnaceNumberRef = ref(null)
	//搜素数据
	const searchForm = ref({
		CardTypeCode: '', //
		CardTypeName: '', //
	});

	const radio1 = ref(false)

	//搜素配置
	const schema = ref({
		CardTypeName: {
			label: '关键字',
			type: 'input',
			props: {
				type: 'text',
				placeholder: '选择输入关键字搜索',
			},
			colProps: {
				md: 8,
			},
		},

		CardTypeName2: {
			label: '',
			colProps: {
				md: 10,
			},
			slots: {
				customRender: 'CardTypeName2',
			},
		}
	});

	function clickSearch() {

	}

	const polTableRef = ref(null); //表格ref
	//表格配置
	const columns = ref([
		{ label: '计划状态', key: 'ItemCode', align: 'center' },
		{ label: '数据来源', key: 'ItemName', align: 'center' },
		{ label: '状态', key: 'ItemValue', align: 'center' },
		{ label: '制作命令号', key: 'IsDefault', align: 'center' },
		{ label: '计划号', key: 'P_IsSys', align: 'center' },
		{ label: '熔炼号', key: 'P_IsReadOnly', align: 'center' },
		{ label: '浇次ID号', key: 'gangbao', align: 'center' },
		{ label: '浇次内序号', key: 'kaishi', align: 'center' },
		{ label: '总数量', key: 'chongzhi', align: 'center' },
		{ label: '计划钢种', key: 'gangzhong', align: 'center' },
		{ label: '转炉ID号', key: 'caozhuo', align: 'center' },
		{ label: '冶金路径', key: 'lujin', align: 'center' },
		{ label: '操作', key: 'caozhuo1', align: 'center', width: '220px', slot: true },
	]);

	//表格配置
	const tableOpt = ref({
		columns: columns.value,
		localData: [{
				ItemCode: '未确认',
				ItemName: 'MES',
				ItemValue: '未确认',
				IsDefault: '1213814',
				P_IsSys: '20244541',
				P_IsReadOnly: '20241241',
				gangbao: '201831547',
				kaishi: '1',
				chongzhi: '120t',
				gangzhong: '45',
				caozhuo: '',
				lujin: 'CC',
			},
			{
				ItemCode: '未确认',
				ItemName: 'MES',
				ItemValue: '未确认',
				IsDefault: '1213814',
				P_IsSys: '20244541',
				P_IsReadOnly: '20241241',
				gangbao: '201831547',
				kaishi: '1',
				chongzhi: '120t',
				gangzhong: 'Q235',
				caozhuo: '',
				lujin: 'BOF',
			},
			{
				ItemCode: '未确认',
				ItemName: 'MES',
				ItemValue: '未确认',
				IsDefault: '1213814',
				P_IsSys: '20244541',
				P_IsReadOnly: '20241241',
				gangbao: '201831547',
				kaishi: '1',
				chongzhi: '120t',
				gangzhong: 'GCR15',
				caozhuo: '',
				lujin: 'BOF',
			},
			{
				ItemCode: '未确认',
				ItemName: 'MES',
				ItemValue: '未确认',
				IsDefault: '1213814',
				P_IsSys: '20244541',
				P_IsReadOnly: '20241241',
				gangbao: '201831547',
				kaishi: '1',
				chongzhi: '120t',
				gangzhong: 'GCR15',
				caozhuo: '',
				lujin: 'LF',
			},
			{
				ItemCode: '未确认',
				ItemName: 'MES',
				ItemValue: '未确认',
				IsDefault: '1213814',
				P_IsSys: '20244541',
				P_IsReadOnly: '20241241',
				gangbao: '201831547',
				kaishi: '1',
				chongzhi: '120t',
				gangzhong: '45',
				caozhuo: '',
				lujin: 'CC',
			},
			{
				ItemCode: '未确认',
				ItemName: 'MES',
				ItemValue: '未确认',
				IsDefault: '1213814',
				P_IsSys: '20244541',
				P_IsReadOnly: '20241241',
				gangbao: '201831547',
				kaishi: '1',
				chongzhi: '120t',
				gangzhong: 'Q235',
				caozhuo: '',
				lujin: 'BOF',
			},
			{
				ItemCode: '未确认',
				ItemName: 'MES',
				ItemValue: '未确认',
				IsDefault: '1213814',
				P_IsSys: '20244541',
				P_IsReadOnly: '20241241',
				gangbao: '201831547',
				kaishi: '1',
				chongzhi: '120t',
				gangzhong: 'GCR15',
				caozhuo: '',
				lujin: 'BOF',
			},
			{
				ItemCode: '未确认',
				ItemName: 'MES',
				ItemValue: '未确认',
				IsDefault: '1213814',
				P_IsSys: '20244541',
				P_IsReadOnly: '20241241',
				gangbao: '201831547',
				kaishi: '1',
				chongzhi: '120t',
				gangzhong: 'GCR15',
				caozhuo: '',
				lujin: 'LF',
			},
			{
				ItemCode: '未确认',
				ItemName: 'MES',
				ItemValue: '未确认',
				IsDefault: '1213814',
				P_IsSys: '20244541',
				P_IsReadOnly: '20241241',
				gangbao: '201831547',
				kaishi: '1',
				chongzhi: '120t',
				gangzhong: '45',
				caozhuo: '',
				lujin: 'CC',
			},
			{
				ItemCode: '未确认',
				ItemName: 'MES',
				ItemValue: '未确认',
				IsDefault: '1213814',
				P_IsSys: '20244541',
				P_IsReadOnly: '20241241',
				gangbao: '201831547',
				kaishi: '1',
				chongzhi: '120t',
				gangzhong: 'GCR15',
				caozhuo: '',
				lujin: 'LF',
			},
			{
				ItemCode: '未确认',
				ItemName: 'MES',
				ItemValue: '未确认',
				IsDefault: '1213814',
				P_IsSys: '20244541',
				P_IsReadOnly: '20241241',
				gangbao: '201831547',
				kaishi: '1',
				chongzhi: '120t',
				gangzhong: '45',
				caozhuo: '',
				lujin: 'CC',
			},
			{
				ItemCode: '未确认',
				ItemName: 'MES',
				ItemValue: '未确认',
				IsDefault: '1213814',
				P_IsSys: '20244541',
				P_IsReadOnly: '20241241',
				gangbao: '201831547',
				kaishi: '1',
				chongzhi: '120t',
				gangzhong: '45',
				caozhuo: '',
				lujin: 'CC',
			},
			{
				ItemCode: '未确认',
				ItemName: 'MES',
				ItemValue: '未确认',
				IsDefault: '1213814',
				P_IsSys: '20244541',
				P_IsReadOnly: '20241241',
				gangbao: '201831547',
				kaishi: '1',
				chongzhi: '120t',
				gangzhong: '45',
				caozhuo: '',
				lujin: 'CC',
			},
			{
				ItemCode: '未确认',
				ItemName: 'MES',
				ItemValue: '未确认',
				IsDefault: '1213814',
				P_IsSys: '20244541',
				P_IsReadOnly: '20241241',
				gangbao: '201831547',
				kaishi: '1',
				chongzhi: '120t',
				gangzhong: '45',
				caozhuo: '',
				lujin: 'CC',
			},
			{
				ItemCode: '未确认',
				ItemName: 'MES',
				ItemValue: '未确认',
				IsDefault: '1213814',
				P_IsSys: '20244541',
				P_IsReadOnly: '20241241',
				gangbao: '201831547',
				kaishi: '1',
				chongzhi: '120t',
				gangzhong: '45',
				caozhuo: '',
				lujin: 'CC',
			},
			{
				ItemCode: '未确认',
				ItemName: 'MES',
				ItemValue: '未确认',
				IsDefault: '1213814',
				P_IsSys: '20244541',
				P_IsReadOnly: '20241241',
				gangbao: '201831547',
				kaishi: '1',
				chongzhi: '120t',
				gangzhong: '45',
				caozhuo: '',
				lujin: 'CC',
			},
		]
	});

	const dialogOpen = () => {
		furnaceNumberRef.value.dialogOpen(true)
	}
	
	//列表上移
	const moveUp = (row, index) =>{
		if(index === 0) return
		const row1 = JSON.parse(JSON.stringify(tableOpt.value.localData[index - 1]))
		const row2 = JSON.parse(JSON.stringify(row))
		
		tableOpt.value.localData[index] = row1
		tableOpt.value.localData[index - 1] = row2
	}
	//列表下移
	const moveDown = (row, index) =>{
		if(!tableOpt.value.localData[index + 1]) return
		const row1 = JSON.parse(JSON.stringify(tableOpt.value.localData[index + 1]))
		const row2 = JSON.parse(JSON.stringify(row))
		
		tableOpt.value.localData[index] = row1
		tableOpt.value.localData[index + 1] = row2
	}
	
	//编辑
	const dialogPlanPopup = ref(false) //新增编辑弹窗
	//炉次计划弹出
	const planPopup = () => {
		dialogPlanPopup.value = true
	}
	
	//编辑弹窗
	const dialogBZPopup = ref(false) //钢包、钢种弹窗
	const editItem = ref({})
	
	const edit = (row)=>{
		editItem.value = row
		dialogBZPopup.value = true
	}
	
	const value = ref('')
	
</script>

<style lang="scss" scoped>
	.heat-label{
		flex: 0 0 100px;
		text-align: right;
	}
</style>